<template>
  <div class="inn_dialog">
    <Title :title="technology"></Title>
    <div id="skill"></div>
  </div>
</template>

<script>
import * as Echarts from "echarts";
import Title from "@/components/title.vue";
export default {
  components: {
    Title,
  },
  data() {

    return {
      screenWidth: '',
      technology: '技术客栈',
      // optionData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Sun', 'Sun'],
      // optionValue:[20,42,42,42,42,41]
      optionData:[],
      optionValue:[],
    }
  },
  methods: {
    //初始化
    echartsInit() {
      // //获取挂载元素，Echarts.init：初始化Echarts
      let chartDom = Echarts.init(document.querySelector("#skill"))
      window.addEventListener('resize', function () {
        this.screenWidth = document.body.clientWidth / 1000 * 2.5;
        chartDom.resize();
      });
      let  option = {
        xAxis: {
          type: 'category',
          data: this.optionData
        },
        yAxis: {
          type: 'value'
        },
        //设置鼠标经过提示
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            //鼠标经过添加阴影
            type: "shadow",
          },
        },
        series: [
          {
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0, color: 'orangered' // 0% 处的颜色
                }, {
                  offset: 1, color: 'orange' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              barBorderRadius: [30, 30, 0, 0],//柱子的圆角,
            },
            data: this.optionValue,
            type: 'bar',
            barWidth: 20,
          }
        ]
      }
      option && chartDom.setOption(option)

    },
    getTechnical() {
      // 获取技术客栈信息
      this.$axios.getTechnical().then(res => {
        if(res.data.length == 0) return

        this.PhotoData = res.data
        res.data.forEach(item=>{
          this.optionValue.push(item.value + 0)
          this.optionData.push(item.name)
        })
        this.echartsInit()
      })
    }
  },
  mounted() {
    this.getTechnical()
  }
}
</script>

<style scoped lang="less">
.inn_dialog {
  height: calc(100% - 2vw);

  #skill {
    height: 100%;
    overflow: hidden;
  }
}
</style>
